[lodash] chunk 알아보기

lodash 배열 메소드 중 하나인 _.chunk()에 대하여 알아봅니다.

# lodash chunk 메소드

chunk의 사전적 의미를 먼저 살펴보면 아래와 같이 나타납니다.

chunk  n. 덩어리, 많은 양

뜻을 통해서 chunk()가 어떤 큰 뭉치나 덩어리로 만들어준다는 것을 대충 알 수 있습니다. 실제로 배열에 chunk()를 사용하면 특정 길이를 가지는 배열 단위의 부분 집합을 가지도록 만들어 줍니다. 예를들어 아래와 같은 하나의 배열이 2차원 배열처럼 변경할 수도 있죠.

Before )
[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

After )
[ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]


이처럼 배열 내부의 배열 형태는 매우 유용하게 사용되는 데이터의 한 형태입니다. 다음으로 _.chunk()의 간략한 문법은 아래와 같습니다.


_.chunk(Array, Chunk size)

// Array : chunk를 적용할 배열
// Chunk size<Number>: chunk 단위로 묶게 될 크기, size

size는 배열의 크기를 나타내며 size만큼 가지는 배열의 집합으로 바뀌게 됩니다. 그럼 아래에서 간략하게 몇 가지 예제를 만들어 보겠습니다.

! lodash _.chunk() 예제보기

아래에서는 배열 변수 myItems를 만들고 각각 다른 크기의 값을 가지는 2차원 배열을 만들어 보겠습니다. 다음의 코드를 봐주세요.

위 코드를 실행하면 그 결과는 각각 아래와 같이 나타나게 됩니다. 가장 먼저 _.chunk(myItems)의 결과입니다.

결과를 보면 모두 하나씩 크기를 가지는 결과를 반환하게 됩니다. 즉 _.chunk(myitems, 1)과 동일한 결과를 가져오죠.

다음은 _.chunk(myItems, 3)을 실행한 결과입니다. 3개의 값을 가지는 2차원 배열로 변환된 것을 알 수 있습니다.

다음은 _.chunk(myItems, 5)을 실행한 결과입니다.

아이템이 모두 9개이므로 각각 5, 4개를 가지는 2차원 배열로 변환되었습니다.


위의 예제는 매우 간단한 형태의 예재입니다 ~ 그렇다면 실제로 사용 가능한 예제는 무엇이 있을까요? 만약 학급에 전체 학생이 21명인 경우 5명으로 조를 나누어 체육 대회를 연다고 가정해봅니다. 이 때 각각의 학생들의 조를 나누어야한다면 chunk()를 사용할 수 있겠습니다. 다로 코드를 작성해보도록 하겠습니다.


@ 21명인 학급에서 5명씩 조를 나누는 예제 만들기
먼저 코드를 작성해봅니다. 학급 인원인 21이므로 숫자 1부터 21까지의 값을 가지는 배열을 먼저 하나 만들고 이를 members에 선언합니다.
(n개의 값을 가지는 배열을 만드는 방법은 꽤 여러가지가 있습니다. 위 방은 그 중 하나의 방법입니다.)

이제 members 배열에 _.chunk()를 사용하여 n 크기의 값을 가지는 여러 개의 배열로 만들어보겠습니다. 각각의 배열이 각 조를 의미한다고 보면 되겠습니다.
위 코드를 실행하면 아래와 같이 나타나게 됩니다.

결과를 확인해보면 21개의 값을 가지는 배열이 각각 5개씩 묶여 2차원 배열의 형태를 가지게 되었습니다!

위의 전체 코드는 아래와 같게됩니다.

! 마치면서

여기까지 _.chunk() 메소드에 대하여 알아봤습니다. 쉽게 생각하면 _.chunk()는 배열의 값을 2차원 배열로 변환할 수 있습니다. 이를 통해 무엇을 할 수 있을까요? 그 전에 객체를 2차원 배열로 변환할 수 있죠? Object.entries()를 사용하면 쉽게 가능합니다. 객체에서 배열로 바뀐 값은 Object.fromEntries()를 사용해 다시 객체로 변환할 수 있습니다. 결국 2차원 배열을 사용하여 객체로 변환할 수도 있다는 것을 의미합니다. 이처럼 배열과 객체의 형변환을 통해 데이터를 좀 더 쉽게 바꾸거나 조작하는 것이 가능합니다. 때때로 컬렉션 값 중에서 특정 데이터만 추출하거나 값을 가져와야하는 경우 이를 활용하면 매우 편리합니다.